/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component, Fragment } from 'react';
import { HashRouter as Router, Link } from 'react-router-dom'
import TECHF5VELogoWhite from '../../../../../images/TechF5ve.png'
import TECHF5VELogoBlack from '../../../../../images/TechF5veBlack.png'
import AvatorShow_container from '../../../../../containers/AvatorShow_container';

import store from '../../../../../redux/store'
import { Provider } from 'react-redux'

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activeIndex: 0, // 现在的触发索引
      isMouse: false, // 鼠标是否在header里
    }

    store.subscribe(this.handleIsLogin)
  }

  addActive = (index) => {
    this.line.style.left = index * 88 + 'px';

    this.setState({
      activeIndex: index,
      isMouse: true
    });
  }

  removeActive = (index) => {
    this.line.style.left = index * 88 + 'px';

    this.setState({
      activeIndex: index,
      isMouse: false
    });
  }

  // 判断该不该显示头像（是不是处于登陆状态）
  handleIsLogin = () => {
    let { user } = store.getState();

    this.setState({
      user
    });
  }

  handleAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }

      switch (anchorName) {
        case 'first':
          this.props.handleHeaderArchor(0);
          break;
        case 'second':
          this.props.handleHeaderArchor(1);
          break;
        case 'three':
          this.props.handleHeaderArchor(2);
          break;
        default:

      }
    }
  }

  render() {
    var textColor = '#fff'; // 控制导航栏的文字颜色
    var headerBackColor = 'transparent'; // 控制导航栏的背景颜色
    var headerOpacity = 0; // 控制导航栏的透明度
    var imgIndex = 0; // 控制logo的颜色
    if (this.props.isFixed) {
      switch (this.props.scrollIndex) {
        case 0:
          headerOpacity = 0.3;
          if (this.state.activeIndex === 1) {
            if (!this.state.isMouse) {
              this.setState({
                activeIndex: 0
              });
              this.line.style.left = 0 + 'px';
            }
          }
          break;
        case 1:
          headerOpacity = 1;
          textColor = '#000';
          headerBackColor = '#fff';
          imgIndex = 1;
          if (this.state.activeIndex === 0 || this.state.activeIndex === 2) {
            if (!this.state.isMouse) {
              this.setState({
                activeIndex: 1
              });
              this.line.style.left = 1 * 88 + 'px';
            }
          }
          break;
        case 2:
          headerOpacity = 0.7;
          textColor = '#000';
          headerBackColor = '#ccc';
          imgIndex = 1;
          if (this.state.activeIndex === 1 || this.state.activeIndex === 3) {
            if (!this.state.isMouse) {
              this.setState({
                activeIndex: 2
              });
              this.line.style.left = 2 * 88 + 'px';
            }
          }
          break;
        case 3:
          headerOpacity = 1;
          textColor = '#000';
          headerBackColor = '#fff';
          imgIndex = 1;
          if (this.state.activeIndex === 2 || this.state.activeIndex === 4) {
            if (!this.state.isMouse) {
              this.setState({
                activeIndex: 3
              });
              this.line.style.left = 3 * 88 + 'px';
            }
          }
          break;
        case 4:
          headerOpacity = 1;
          textColor = '#000';
          headerBackColor = '#fff';
          imgIndex = 1;
          if (this.state.activeIndex === 3) {
            if (!this.state.isMouse) {
              this.setState({
                activeIndex: 4
              });
              this.line.style.left = 4 * 88 + 'px';
            }
          }
          break;
        default:
      }
    }

    var temp = < Link to="/login" className="button">
      登录 / 注册
    </Link>

    let {user} = store.getState();

    if (user) {
      temp = <Provider store={store}>
        <AvatorShow_container avatorURL={user.avator} top={10} labelTop={65} />
      </Provider>
    }

    return (
      <Fragment>
        <div style={{
          width: '100%',
          position: (this.props.isFixed ? 'fixed' : 'absolute'),
          zIndex: 199,
          boxShadow: '0 1px 3px rgba(26,26,26,.1)'
        }}>
          <header style={{
            height: 80,
            width: 1200,
            margin: '0 auto',
          }}>
            <nav style={{ margin: "0 auto" }}>
              <div className="logo" style={{
                float: "left",
              }}>
                <img src={imgIndex === 0 ? TECHF5VELogoWhite : TECHF5VELogoBlack} alt="logo" style={{
                  width: 300,
                  height: 80
                }} />
              </div>
              <div className="nav" style={{ float: "right" }}>
                <Link
                  to="#"
                  style={{
                    color: (this.state.activeIndex === 0 ? '#f00' : textColor),
                    textDecoration: 'none'
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(0)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                  onClick={() => this.handleAnchor('first')}
                >
                  介绍
                </Link>
                <Link
                  to="#"
                  style={{
                    color: (this.state.activeIndex === 1 ? '#f00' : textColor),
                    textDecoration: 'none'
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(1)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                  onClick={() => this.handleAnchor('second')}
                >
                  服务
                </Link>
                <Link
                  to="#"
                  style={{
                    color: (this.state.activeIndex === 2 ? '#f00' : textColor),
                    textDecoration: 'none'
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(2)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                  onClick={() => this.handleAnchor('three')}
                >
                  示例
                </Link>
                <Link
                  to="#"
                  style={{
                    color: (this.state.activeIndex === 3 ? '#f00' : textColor),
                    textDecoration: 'none'
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(3)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                  onClick={() => this.handleAnchor('four')}
                >
                  团队
                </Link>
                <Link
                  to="#"
                  style={{
                    color: (this.state.activeIndex === 4 ? '#f00' : textColor),
                    textDecoration: 'none'
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(4)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                  onClick={() => this.handleAnchor('five')}
                >
                  联系
                </Link>
                <Link
                  to={{
                    pathname: `/blog/undefined`
                  }}
                  style={{
                    color: (this.state.activeIndex === 5 ? '#f00' : textColor)
                  }}
                  className='navItem'
                  onMouseOver={() => this.addActive(5)}
                  onMouseOut={() => this.removeActive(this.props.scrollIndex)}
                >
                  博客
                </Link>
                {
                  temp
                }
                <div
                  ref={(line) => { this.line = line }}
                  style={{
                    backgroundColor: '#ff0000',
                    width: 48,
                    height: 2,
                    position: 'relative',
                    top: -15,
                    left: 0,
                    transitionDuration: '0.6s'
                  }}
                ></div>
              </div>
            </nav>
          </header>
        </div>
        <div style={{
          width: '100%',
          height: 80,
          position: (this.props.isFixed ? 'fixed' : 'absolute'),
          opacity: headerOpacity,
          backgroundColor: headerBackColor,
          transitionDuration: '1s',
          zIndex: 198
        }}></div>
      </Fragment>
    )
  }
}